<template>
	<div id="publicfoot">
		<div class="weui-tabbar">
			<a href="javascript:;" class="weui-tabbar__item weui-bar__item_on" @click="routerTo(0)">
				<router-link to="MainIndex">
					<div style="display: inline-block;position: relative;">
						<img src="../../assets/img/messages.png" alt="" class="weui-tabbar__icon">
						<span class="weui-badge" style="position: absolute;top: -2px;right: -13px;">8</span>
					</div>
					<span class="weui-tabbar__label">
						<p class="tells tell">消息</p>
					</span>
				</router-link>
			</a>
			<a href="javascript:;" class="weui-tabbar__item" @click="routerTo(1)">
				<router-link to="FriendList">
					<img src="../../assets/img/tel.png" alt="" class="weui-tabbar__icon">
					<span class="weui-tabbar__label">
						<p class="tell">通讯录</p>
					</span>
				</router-link>
			</a>
			<a href="javascript:;" class="weui-tabbar__item" @click="routerTo(2)">
				<router-link to="Learn">
					<div style="display: inline-block;position: relative;">
						<img src="../../assets/img/find.png" alt="" class="weui-tabbar__icon">
						<span class="weui-badge weui-badge_dot" style="position: absolute;top: 0;right: -6px;"></span>
					</div>
					<span class="weui-tabbar__label">
						<p class="tell">知识台</p>
					</span>
				</router-link>
			</a>
			<a href="javascript:;" class="weui-tabbar__item" @click="routerTo(3)">
				<router-link to="Work">
					<img src="../../assets/img/works.png" alt="" class="weui-tabbar__icon">
					<span class="weui-tabbar__label">
						<p class="tell">工作台</p>
					</span>
				</router-link>
			</a>
			<a href="javascript:;" class="weui-tabbar__item" @click="routerTo(4)">
				<router-link to="UserMain">
					<img src="../../assets/img/my.png" alt="" class="weui-tabbar__icon">
					<span class="weui-tabbar__label">
						<p class="tell">我的</p>
					</span>
				</router-link>
			</a>
		</div>
	</div>
</template>
<script>
	import $ from 'jquery'
	export default {
		name: 'publicfoot',
		data() {
			return {

			}
		},
		methods: {
			routerTo(num) {
				let aa = $(".weui-tabbar").find("a").children(num);
				$(".weui-tabbar").find(".tell").removeClass("tells");
				aa.find("p").eq(num).addClass("tells");
			}
		}
	}
</script>

<style scoped="scoped">
	#publicfoot {
		width: 100%;
		height: 100%;
		font-size: 0.14rem;
	}
	
	.tells {
		color: green !important;
		font-weight: 800;
	}
	
	.tell {
		color: black;
	}
	
	.weui-tabbar__icon {
		margin-top: 0.05rem;
		width: 0.2rem;
		height: 0.2rem;
	}
	
	.weui-tabbar__label {
		font-size: 0.12rem;
	}
</style>